<template>
  <el-card>
    <el-form :inline="true" :model="form">
      <el-form-item>
        <el-input v-model="form.order_no" :placeholder="$t('挂单号搜索')" clearable />
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.sell_currency" :placeholder="$t('卖出币种')" clearable class="w-36">
          <el-option v-for="item in currencyList" :key="item.key" :label="item.name" :value="item.symbol"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.buy_currency" :placeholder="$t('买入币种')" clearable class="w-36">
          <el-option v-for="item in currencyList" :key="item.key" :label="item.name" :value="item.symbol"></el-option>
          <p>{{ $route.query.buy_currency }}</p>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.price_type" :placeholder="$t('价格类型')" clearable class="w-36">
          <el-option :label="$t('固定价格')" value="fixed" />
          <el-option :label="$t('浮动价格')" value="float" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.status" :placeholder="$t('状态')" clearable class="w-28">
          <el-option :label="$t('正常')" :value="0" />
          <el-option :label="$t('交易中')" :value="1" />
          <el-option :label="$t('暂停')" :value="2" />
          <el-option :label="$t('取消')" :value="3" />
          <el-option :label="$t('结束')" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="onSubmit">{{ $t('查询')}}</el-button>
        <el-button type="primary" :icon="Plus" v-btn="['all', 'web_exchange_ent_records_place']" @click="handleClickCreate"
         >{{ $t('创建挂单') }}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="loading">
      <el-table-column prop="order_no" :label="$t('挂单号')" align="center" width="250" />
      <el-table-column prop="sell_currency" :label="$t('卖出币种')" align="center" width="90"/>
      <el-table-column prop="buy_currency" :label="$t('买入币种')" align="center" width="90"/>
      <el-table-column  prop="price_type_name" :label="$t('价格类型')" align="center" width="100" />
      <el-table-column :label="$t('价格/浮动比例')" align="center">
        <template #default="scope">
          {{ scope.row.price_type == 'fixed' ? scope.row.fixed_price : scope.row.price_ratio + "%" }}
        </template>
      </el-table-column>
      <el-table-column prop="sell_amount" :label="$t('总卖出金额')" align="right">
      <template #default="scope">
          {{ numberToCurrencyNo(scope.row.sell_amount) }} {{ scope.row.sell_currency }}
        </template>
      </el-table-column>
      <el-table-column prop="left_amount" :label="$t('可卖出金额')" align="right">
      <template #default="scope">
          {{ numberToCurrencyNo(scope.row.left_amount) }} {{ scope.row.sell_currency }}
        </template>
      </el-table-column>
      <el-table-column prop="left_amount_total" :label="$t('折合购买金额')" align="right">
      <template #default="scope">
          {{ numberToCurrencyNo(scope.row.left_amount_total) }} {{ scope.row.buy_currency }}
        </template>
      </el-table-column>
      <el-table-column prop="status" :label="$t('单笔限额')" align="center" width="200">
        <template #default="scope">
            {{ numberToCurrencyNo(scope.row.min_amount) }} {{ scope.row.sell_currency }}
            - {{ numberToCurrencyNo(scope.row.max_amount) }} {{ scope.row.sell_currency }}
        </template>
      </el-table-column>
      <el-table-column prop="status_name" :label="$t('状态')" align="center" width="100">
        <!-- <template #default="scope">
          {{ status[scope.row.status] }}
        </template> -->
      </el-table-column>
      <!-- 挂单操作 -->
      <el-table-column :label="$t('操作')" align="center" fixed="right" width="250">
        <template #default="scope">
          <el-button round size="small" :icon="TurnOff" type="danger" v-btn="['all', 'web_exchange_ent_records_pause']"
            @click="handleSet(scope.row, 2)" v-if="scope.row.status == 0">{{ $t('暂停') }}</el-button>
          <el-button round size="small" :icon="Open" type="success" v-btn="['all', 'web_exchange_ent_records_pause']"
            @click="handleSet(scope.row, 0)" v-if="scope.row.status == 2">{{ $t('开启') }}</el-button>

          <router-link v-btn="['all', 'web_exchange_ent_records_edit']" :to="{
            path: '/exchange/publish/edit',
            query: { order_no: scope.row.order_no },
          }" v-if="scope.row.status == 0 || scope.row.status == 2">
            <el-button round size="small" :icon="Edit" type="warning" class="mx-1">{{ $t('编辑') }}</el-button>
          </router-link>
            <el-button round size="small" type="danger" :icon="Delete" v-btn="['all', 'web_exchange_ent_records_delete']"
            v-if="scope.row.status == 0 || scope.row.status == 2" @click="handleDelete(scope.row.order_no)">{{ $t('删除') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-5 flex justify-center">
      <el-pagination background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        :default-page-size="pageable.pageSize"
        :default-current-page="pageable.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </el-card>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import {
  getEntRecordsApi,
  getCurrencyNewApi,
  setEntApi,
  entDeleteApi,
} from "@/api/exchange/index";
import { ElMessage } from "element-plus";
import { Search, Plus, Edit, Delete, Open, TurnOff } from '@element-plus/icons-vue'
import { numberToCurrencyNo } from "@/utils/utils";
const router = useRouter();
const currencyList = ref([]); //币种
const loading = ref(false);
const form = reactive({
  order_no: "",
  buy_currency: "",
  sell_currency: "",
  price_type: "",
  status: "",
});
// const status = reactive({
//   0: "正常",
//   1: "交易中",
//   2: "暂停",
//   3: "取消",
//   4: "结束",
// });
// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});
// 表格数据
const tableData = ref([]);
// 参数
const param = () => {
  return {
    page: pageable.pageNum,
    pagesize: pageable.pageSize,
    order_no: form.order_no,
    buy_currency: form.buy_currency,
    sell_currency: form.sell_currency,
    price_type: form.price_type,
    status: form.status,
  };
};
const onSubmit = () => {
  getTbaleData();
};
//创建挂单
const handleClickCreate = () => {
  router.replace(`/exchange/publish/create`);
};
// 条数
const handleSizeChange = number => {
  pageable.pageSize = number;
  getTbaleData();
};
// 页码
const handleCurrentChange = (number) => {
  pageable.pageNum = number;
  getTbaleData();
};
// 获取币种
const getCurrencyData = async () => {
  const res = await getCurrencyNewApi();

  currencyList.value = res.currency;
};
//编辑
const handleDetails = () => { };

// 开启/暂停挂单
const handleSet = async ({ ...row }, status) => {
  try {
    const res = await setEntApi({ order_no: row.order_no, status: status });
    ElMessage({
      showClose: true,
      message: "成功",
      type: "success",
    });
    getTbaleData();
  } catch (error) { }
};

// 获取表格数据
const getTbaleData = async () => {
  loading.value = true;

  try {
    // 获取数据
    const res = await getEntRecordsApi(param());
    loading.value = false;
    tableData.value = res.list;
    pageable.total = res.page.total_count;
  } catch (error) {
    loading.value = false;
  }
};

//删除
const handleDelete = async (order_no) => {
  try {
    const res = await entDeleteApi({ order_no: order_no });
    ElMessage({
      showClose: true,
      message: "删除成功",
      type: "success",
    });
    getTbaleData(); // 更新表格数据
  } catch (error) {

  }
};
Promise.all([getTbaleData(), getCurrencyData()]);
</script>
